
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <meta name="theme-color" content="#000000" />
            <meta name="description" content="a marimo app" />
            <title>🏝️</title>

            <script type="module" src="https://cdn.jsdelivr.net/npm/@marimo-team/islands@0.13.14/dist/main.js"></script>
<link
    href="https://cdn.jsdelivr.net/npm/@marimo-team/islands@0.13.14/dist/style.css"
    rel="stylesheet"
    crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
    rel="preconnect"
    href="https://fonts.gstatic.com"
    crossorigin
/>
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&amp;family=Lora&amp;family=PT+Sans:wght@400;700&amp;display=swap" rel="stylesheet" />
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css"
    integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww"
    crossorigin="anonymous"
/>
<marimo-filename hidden></marimo-filename>

            <!-- If running a local server of the production build -->
            <!-- <script type="module" src="http://127.0.0.1:8001/main.js"></script>
            <link
              href="http://127.0.0.1:8001/style.css"
              rel="stylesheet"
              crossorigin="anonymous"
            /> -->

            <!-- If running from Vite -->
            <!-- <script type="module" src="/src/core/islands/main.ts"></script> -->
        </head>
        <body>

    <marimo-island
    data-app-id="main"
    data-cell-id="Hbol"
    data-reactive="true"
>
    <marimo-cell-output>
    <span></span>
    </marimo-cell-output>
    <marimo-cell-code hidden>import%20marimo%20as%20mo</marimo-cell-code>
</marimo-island>
<marimo-island
    data-app-id="main"
    data-cell-id="MJUe"
    data-reactive="true"
>
    <marimo-cell-output>
    <span class="markdown prose dark:prose-invert contents"><span class="paragraph">Hello, islands!</span></span>
    </marimo-cell-output>
    <marimo-cell-code hidden>mo.md('Hello%2C%20islands!')</marimo-cell-code>
</marimo-island>
<marimo-island
    data-app-id="main"
    data-cell-id="vblA"
    data-reactive="true"
>
    <marimo-cell-output>
    <marimo-ui-element object-id='vblA-0' random-id='f766db97-6524-c217-3975-99e795060023'><marimo-slider data-initial-value='0' data-label='null' data-start='0' data-stop='100' data-step='2' data-steps='[]' data-debounce='false' data-disabled='false' data-orientation='&quot;horizontal&quot;' data-show-value='false' data-include-input='false' data-full-width='false'></marimo-slider></marimo-ui-element>
    </marimo-cell-output>
    <marimo-cell-code hidden>%0Aslider%20%3D%20mo.ui.slider(0%2C%20100%2C%202)%0Aslider%0A</marimo-cell-code>
</marimo-island>
<marimo-island
    data-app-id="main"
    data-cell-id="bkHC"
    data-reactive="true"
>
    <marimo-cell-output>
    <span class="markdown prose dark:prose-invert contents"><span class="paragraph">Slider value: 0</span></span>
    </marimo-cell-output>
    <marimo-cell-code hidden>%0Amo.md(f%22Slider%20value%3A%20%7Bslider.value%7D%22)%0A</marimo-cell-code>
</marimo-island>
<marimo-island
    data-app-id="main"
    data-cell-id="lEQa"
    data-reactive="true"
>
    <marimo-cell-output>
    <span class="markdown prose dark:prose-invert contents"><span class="paragraph">We can also show the island code!</span></span>
    </marimo-cell-output>
    <marimo-ui-element object-id='3f8d1379-362f-ff6e-5534-e045a7f80ff7' random-id='3f8d1379-362f-ff6e-5534-e045a7f80ff7'><marimo-code-editor data-initial-value='&quot;mo.md(&#92;&quot;We can also show the island code!&#92;&quot;)&quot;' data-label='null' data-language='&quot;python&quot;' data-placeholder='&quot;&quot;' data-disabled='false' data-show-copy-button='true' data-debounce='false'></marimo-code-editor></marimo-ui-element>
</marimo-island>
<marimo-island
    data-app-id="main"
    data-cell-id="PKri"
    data-reactive="false"
>
    <marimo-cell-output>
    <marimo-mime-renderer data-mime='&quot;application/vnd.marimo+error&quot;' data-data='[{&quot;msg&quot;: &quot;No module named &#x27;matplotlib&#x27;&quot;, &quot;exception_type&quot;: &quot;ModuleNotFoundError&quot;, &quot;raising_cell&quot;: null, &quot;type&quot;: &quot;exception&quot;}]'></marimo-mime-renderer>
    </marimo-cell-output>
    <marimo-ui-element object-id='04d339f9-b859-6b60-030d-0bf689282c88' random-id='04d339f9-b859-6b60-030d-0bf689282c88'><marimo-code-editor data-initial-value='&quot;# Also run expensive outputs without performing them in the browser&#92;nimport matplotlib.pyplot as plt&#92;nimport numpy as np&#92;nx = np.linspace(0, 2*np.pi, 100)&#92;ny = np.sin(x)&#92;nplt.plot(x, y)&#92;nplt.gca()&quot;' data-label='null' data-language='&quot;python&quot;' data-placeholder='&quot;&quot;' data-disabled='false' data-show-copy-button='true' data-debounce='false'></marimo-code-editor></marimo-ui-element>
</marimo-island>
<marimo-island
    data-app-id="main"
    data-cell-id="Xref"
    data-reactive="true"
>
    <marimo-cell-output>
    <marimo-mime-renderer data-mime='&quot;application/vnd.marimo+error&quot;' data-data='[{&quot;msg&quot;: &quot;No module named &#x27;idk_package&#x27;&quot;, &quot;exception_type&quot;: &quot;ModuleNotFoundError&quot;, &quot;raising_cell&quot;: null, &quot;type&quot;: &quot;exception&quot;}]'></marimo-mime-renderer>
    </marimo-cell-output>
    <marimo-cell-code hidden>%0Aimport%20idk_package%0A%22Should%20raise%20an%20error%22%0A</marimo-cell-code>
</marimo-island>
<marimo-island
            data-app-id="main"
            data-cell-id="SFPL"
            data-reactive="true"
        >
            <marimo-cell-output>
            <span class="markdown prose dark:prose-invert contents"><h1 id="hello-markdown">Hello, Markdown!</h1>
<span class="paragraph">Use marimo's "<code>md</code>" function to embed rich text into your marimo
apps. This function compiles Markdown into HTML that marimo
can display.</span>
<span class="paragraph">For example, here's the code that rendered the above title and
paragraph:</span>
<div class="language-python3 codehilite"><pre><span></span><code><span class="n">mo</span><span class="o">.</span><span class="n">md</span><span class="p">(</span>
<span class="w">    </span><span class="sd">&#39;&#39;&#39;</span>
<span class="sd">    # Hello, Markdown!</span>
<span class="sd">    Use marimo&#39;s &quot;`md`&quot; function to embed rich text into your marimo</span>
<span class="sd">    apps. This function compiles your Markdown into HTML that marimo</span>
<span class="sd">    can display.</span>
<span class="sd">    &#39;&#39;&#39;</span>
<span class="p">)</span>
</code></pre></div></span>
            </marimo-cell-output>
            <marimo-cell-code hidden>%0Amo.md(%0A%20%20%20%20%22%22%22%0A%20%20%20%20%23%20Hello%2C%20Markdown!%0A%0A%20%20%20%20Use%20marimo's%20%22%60md%60%22%20function%20to%20embed%20rich%20text%20into%20your%20marimo%0A%20%20%20%20apps.%20This%20function%20compiles%20Markdown%20into%20HTML%20that%20marimo%0A%20%20%20%20can%20display.%0A%0A%20%20%20%20For%20example%2C%20here's%20the%20code%20that%20rendered%20the%20above%20title%20and%0A%20%20%20%20paragraph%3A%0A%0A%20%20%20%20%60%60%60python3%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20'''%0A%20%20%20%20%20%20%20%20%23%20Hello%2C%20Markdown!%0A%0A%20%20%20%20%20%20%20%20Use%20marimo's%20%22%60md%60%22%20function%20to%20embed%20rich%20text%20into%20your%20marimo%0A%20%20%20%20%20%20%20%20apps.%20This%20function%20compiles%20your%20Markdown%20into%20HTML%20that%20marimo%0A%20%20%20%20%20%20%20%20can%20display.%0A%20%20%20%20%20%20%20%20'''%0A%20%20%20%20)%0A%20%20%20%20%60%60%60%0A%20%20%20%20%22%22%22%0A)%0A</marimo-cell-code>
        </marimo-island>
<marimo-island
            data-app-id="main"
            data-cell-id="BYtC"
            data-reactive="true"
        >
            <marimo-cell-output>
            <span class="markdown prose dark:prose-invert contents"><h2 id="latex">LaTeX</h2>
<span class="paragraph">You can embed LaTeX in Markdown.</span>
<span class="paragraph">For example,</span>
<div class="language-python3 codehilite"><pre><span></span><code><span class="n">mo</span><span class="o">.</span><span class="n">md</span><span class="p">(</span><span class="sa">r</span><span class="s1">&#39;$f : \mathbf</span><span class="si">{R}</span><span class="s1">     o \mathbf</span><span class="si">{R}</span><span class="s1">$&#39;</span><span class="p">)</span>
</code></pre></div>
<span class="paragraph">renders <marimo-tex class="arithmatex">||(f : \mathbf{R}     o \mathbf{R}||)</marimo-tex>, while</span>
<div class="language-python3 codehilite"><pre><span></span><code><span class="n">mo</span><span class="o">.</span><span class="n">md</span><span class="p">(</span>
<span class="w">    </span><span class="sa">r</span><span class="sd">&#39;&#39;&#39;</span>
<span class="sd">    \[</span>
<span class="sd">    f: \mathbf{R}   o \mathbf{R}</span>
<span class="sd">    \]</span>
<span class="sd">    &#39;&#39;&#39;</span>
<span class="p">)</span>
</code></pre></div>
<span class="paragraph">renders the display math</span>
<marimo-tex class="arithmatex">||[
f: \mathbf{R}       o \mathbf{R}.
||]</marimo-tex></span>
            </marimo-cell-output>
            <marimo-cell-code hidden>%0Amo.md(%0A%20%20%20%20r%22%22%22%0A%20%20%20%20%23%23%20LaTeX%0A%20%20%20%20You%20can%20embed%20LaTeX%20in%20Markdown.%0A%0A%20%20%20%20For%20example%2C%0A%0A%20%20%20%20%60%60%60python3%0A%20%20%20%20mo.md(r'%24f%20%3A%20%5Cmathbf%7BR%7D%20%09o%20%5Cmathbf%7BR%7D%24')%0A%20%20%20%20%60%60%60%0A%0A%20%20%20%20renders%20%24f%20%3A%20%5Cmathbf%7BR%7D%20%09o%20%5Cmathbf%7BR%7D%24%2C%20while%0A%0A%20%20%20%20%60%60%60python3%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r'''%0A%20%20%20%20%20%20%20%20%5C%5B%0A%20%20%20%20%20%20%20%20f%3A%20%5Cmathbf%7BR%7D%20%09o%20%5Cmathbf%7BR%7D%0A%20%20%20%20%20%20%20%20%5C%5D%0A%20%20%20%20%20%20%20%20'''%0A%20%20%20%20)%0A%20%20%20%20%60%60%60%0A%0A%20%20%20%20renders%20the%20display%20math%0A%0A%20%20%20%20%5C%5B%0A%20%20%20%20f%3A%20%5Cmathbf%7BR%7D%20%09o%20%5Cmathbf%7BR%7D.%0A%20%20%20%20%5C%5D%0A%20%20%20%20%22%22%22%0A)%0A</marimo-cell-code>
        </marimo-island>


        <br />
        <br />
        <br />
        <br />
        <hr />
        <div class="bg-background p-4 border-2 text-primary font-bold bg-background">
        this should not be affected by global tailwind styles
        </div>
        <div class="marimo">
        <div class="bg-background p-4 border-2 text-primary font-bold text-foreground">
            this should be affected by global tailwind styles
        </div>
        </div>
        <div class="marimo">
        <div class="dark">
            <div class="bg-background p-4 border-2 text-primary font-bold text-foreground">
            this should be affected by global tailwind styles (dark)
            </div>
        </div>
        </div>

        </body>
    </html>

